<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

  <head>

  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  	<meta http-equiv="x-ua-compatible" content="ie=edge">

  	<title>宠物</title>
  	<link rel="shortcut icon" href="assets/images/favourite_icon.svg">

  	<!-- fraimwork - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

    <!-- icon font - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/fontawesome.css">
    <link rel="stylesheet" type="text/css" href="assets/css/stroke-gap-icons.css">
    <link rel="stylesheet" type="text/css" href="assets/css/icofont.css">

    <!-- animation - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">

    <!-- carousel - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/slick.css">
    <link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">

    <!-- popup - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/magnific-popup.css">

    <!-- jquery-ui - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css">

    <!-- select option - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/nice-select.css">

    <!-- custom - css include -->
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

  </head>


  <body>

    <!-- body_wrap - start -->
    <div class="body_wrap">

      <!-- backtotop - start -->
      <div class="backtotop">
        <a href="#" class="scroll">
          <i class="far fa-arrow-up"></i>
        </a>
      </div>
      <!-- backtotop - end -->

      <!-- preloader - start -->
      <div id="preloader"></div>
      <!-- preloader - end -->

      <!-- header_section - start
      ================================================== -->
      <div th:replace="~{pet/common::common_header}"></div>
      <!-- header_section - end
      ================================================== -->

      <!-- main body - start
      ================================================== -->
      <main>

        <!-- sidebar cart - start
        ================================================== -->
        <!-- sidebar cart - end
        ================================================== -->

        <!-- product quick view modal - start
        ================================================== -->
        <div class="modal fade" id="quickview_popup" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel2">Product Quick View</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="product_details">
                  <div class="container">
                    <div class="row">
                      <div class="col col-lg-6">
                        <div class="product_details_image p-0">
                          <img src="assets/images/product_details_img_1.webp" alt="Getyootech - Gadgets Ecommerce Site Template">
                        </div>
                      </div>

                      <div class="col-lg-6">
                        <div class="product_details_content">
                          <h2 class="item_title">CURREN 8109 Watches</h2>
                          <p>
                            It is a long established fact that a reader will be distracted eget velit. Donec ac tempus ante. Fusce ultricies massa massa. Fusce aliquam, purus eget sagittis vulputate
                          </p>
                          <div class="item_review">
                            <ul class="rating_star ul_li">
                              <li><i class="fa-solid fa-star"></i></li>
                              <li><i class="fa-solid fa-star"></i></li>
                              <li><i class="fa-solid fa-star"></i></li>
                              <li><i class="fa-solid fa-star"></i></li>
                              <li><i class="fa-solid fa-star"></i></li>
                            </ul>
                            <span class="review_value">3 Rating(s)</span>
                          </div>
                          <div class="item_price">
                            <span>$620.00</span>
                            <del>$720.00</del>
                          </div>

                          <hr>

                          <div class="item_attribute">
                            <h3 class="title_text">Options <span class="underline"></span></h3>
                            <form action="javascript:;">
                              <div class="row">
                                <div class="col col-md-6">
                                  <div class="select_option clearfix">
                                    <h4 class="input_title">Size *</h4>
                                    <select>
                                      <option data-display="- Please select -">Choose A Option</option>
                                      <option value="1">Some option</option>
                                      <option value="2">Another option</option>
                                      <option value="3" disabled="">A disabled option</option>
                                      <option value="4">Potato</option>
                                    </select>
                                  </div>
                                </div>
                                <div class="col col-md-6">
                                  <div class="select_option clearfix">
                                    <h4 class="input_title">Color *</h4>
                                    <select>
                                      <option data-display="- Please select -">Choose A Option</option>
                                      <option value="1">Some option</option>
                                      <option value="2">Another option</option>
                                      <option value="3" disabled="">A disabled option</option>
                                      <option value="4">Potato</option>
                                    </select>
                                  </div>
                                </div>
                              </div>
                              <span class="repuired_text">Repuired Fiields *</span>
                            </form>
                          </div>

                          <div class="quantity_wrap">
                            <form action="javascript:;">
                              <div class="quantity_input">
                                <button type="button" class="input_number_decrement">
                                  <i class="fal fa-minus"></i>
                                </button>
                                <input class="input_number" type="text" value="1">
                                <button type="button" class="input_number_increment">
                                  <i class="fal fa-plus"></i>
                                </button>
                              </div>
                            </form>

                            <div class="total_price">
                              Total: $620,99
                            </div>
                          </div>

                          <ul class="default_btns_group ul_li">
                            <li><a class="addtocart_btn" href="shop_details.html">Add To Cart</a></li>
                            <li><a href="#!"><i class="fa-solid fa-arrows-rotate"></i></a></li>
                            <li><a href="#!"><i class="fas fa-heart"></i></a></li>
                          </ul>

                          <ul class="default_share_links ul_li">
                            <li>
                              <a class="facebook" href="#!">
                                <span><i class="fab fa-facebook-square"></i> Like</span>
                                <small>10K</small>
                              </a>
                            </li>
                            <li>
                              <a class="twitter" href="#!">
                                <span><i class="fab fa-twitter-square"></i> Tweet</span>
                                <small>15K</small>
                              </a>
                            </li>
                            <li>
                              <a class="google" href="#!">
                                <span><i class="fab fa-google-plus-square"></i> Google+</span>
                                <small>20K</small>
                              </a>
                            </li>
                            <li>
                              <a class="share" href="#!">
                                <span><i class="fas fa-plus-square"></i> Share</span>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- product quick view modal - end
        ================================================== -->

        <!-- slider_section - start
        ================================================== -->
        <section class="slider_section">
          <div class="main_slider" data-slick='{"arrows": false}'>
            <div class="slider_item" th:each="item:${products}">
              <div class="container">
                <div class="row align-items-center justify-content-lg-between">
                  <div class="order-last col col-lg-6 col-md-6 col-sm-6">
                    <div class="slider_image" data-animation="fadeInRight" data-delay=".2s">
                      <img src="assets/images/slider_image_4.webp" th:src="${item.getImg()}" alt="Getyootech - Gadgets Ecommerce Site Template">
                    </div>
                  </div>
                  <div class="col col-lg-5 col-md-6 col-sm-6">
                    <div class="slider_content">
<!--                      <h3 class="small_title" data-animation="fadeInUp2" data-delay=".2s">Tech Products</h3>-->
                      <h4 class="big_title" data-animation="fadeInUp2" data-delay=".4s">[[${item.getName()}]]</h4>
                      <p data-animation="fadeInUp2" data-delay=".6s">[[${item.getInro()}]]</p>
                      <div class="item_price" data-animation="fadeInUp2" data-delay=".6s">
<!--                        <del>$520.00</del>-->
                        <span class="sale_price">$[[${item.getPrice()}]]</span>
                      </div>
                      <a class="btn btn_primary" href="shop_details.html" th:href="@{/product/{id}(id=${item.getId()})}" data-animation="fadeInUp2" data-delay=".8s">立即购买</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>


          </div>
        </section>
        <!-- slider_section - end
        ================================================== -->

        <!-- policy_section - start
        ================================================== -->
        <section class="policy_section">
          <div class="policy_item">
            <div class="item_icon">
              <i class="icon icon-Truck"></i>
            </div>
            <div class="item_content">
              <h3 class="item_title">免费配送</h3>
              <p>
                所有订单均享免费配送
              </p>
            </div>
          </div>

          <div class="policy_item">
            <div class="item_icon">
              <i class="icon icon-Headset"></i>
            </div>
            <div class="item_content">
              <h3 class="item_title">全天候支持</h3>
              <p>
                24小时全天候支持，有问题随时联系我们
              </p>
            </div>
          </div>

          <div class="policy_item">
            <div class="item_icon">
              <i class="icon icon-Wallet"></i>
            </div>
            <div class="item_content">
              <h3 class="item_title">100%退款保障</h3>
              <p>
                商品购买后30天内，随时可申请退款
              </p>
            </div>
          </div>

          <div class="policy_item">
            <div class="item_icon">
              <i class="fa-light fa-rocket"></i>
            </div>
            <div class="item_content">
              <h3 class="item_title">30天无忧退货</h3>
              <p>
                商品有任何问题，支持30天无理由退货
              </p>
            </div>
          </div>

          <div class="policy_item">
            <div class="item_icon">
              <i class="icon icon-Dollars"></i>
            </div>
            <div class="item_content">
              <h3 class="item_title">安全支付</h3>
              <p>
                我们保证您的支付安全，放心购物
              </p>
            </div>
          </div>
        </section>
        <!-- policy_section - end
        ================================================== -->

        <!-- category_section - start
        ================================================== -->
        <section class="category_section section_space">
          <div class="container">
            <div class="section_title mb-0">
              <h2 class="title_text"><i class="fa-duotone fa-fire"></i>推荐商品</h2>
            </div>
            <div class="top_category_wrap arrows_topright">
              <div class="top_category_carousel" data-slick='{"dots": false}'>
                <div class="slider_item" th:each="item:${recpros}">
                  <div class="category_boxed">
                    <a href="shop_grid.html" th:href="@{/product/{id}(id=${item.getId()})}">
                      <span class="item_image">
                        <img src="assets/images/category_5.webp" th:src="${item.getImg()}" alt="Getyootech - Gadgets Ecommerce Site Template">
                      </span>
                      <span class="item_title">[[${item.getName()}]]</span>
                    </a>
                  </div>
                </div>
              </div>
              <div class="carousel_nav">
                <button type="button" class="tc_left_arrow"><i class="fa-regular fa-angle-left"></i></button>
                <button type="button" class="tc_right_arrow"><i class="fa-regular fa-angle-right"></i></button>
              </div>
            </div>

          </div>
        </section>
        <!-- category_section - end
        ================================================== -->

        <!-- promotion_section - start
        ================================================== -->
        <section class="promotion_section">
          <div class="container">
            <div class="row promotion_banner_wrap">
              <div class="col col-lg-6">
                <div class="promotion_banner">
                  <div class="item_image">
                    <img src="assets/images/cat.jpg" alt="Getyootech - Gadgets Ecommerce Site Template">
                  </div>
                  <div class="item_content">
                    <h3 class="item_title">现在领养</h3>
                    <p>
                    </p>
                    <a class="btn btn_primary" href="/adopt">立即领养</a>
                  </div>
                </div>
              </div>

              <div class="col col-lg-6">
                <div class="promotion_banner">
                  <div class="item_image">
                    <img src="assets/images/cat1.png" alt="Getyootech - Gadgets Ecommerce Site Template">
                  </div>
                  <div class="item_content">
                    <h3 class="item_title">现在预约</h3>
                    <p>
                    </p>
                    <a class="btn btn_primary" href="/res">立即预约</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- promotion_section - end
        ================================================== -->

        <!-- new_arrivals_section - start
        ================================================== -->
        <!-- new_arrivals_section - end
        ================================================== -->

        <!-- product_section - start
        ================================================== -->
        <!-- product_section - end
        ================================================== -->

        <!-- brand_section - start
        ================================================== -->
        <!-- brand_section - end
        ================================================== -->

        <!-- viewed_products_section - start
        ================================================== -->
        <!-- viewed_products_section - end
        ================================================== -->

        <!-- newsletter_section - start
        ================================================== -->
        <!-- newsletter_section - end
        ================================================== -->

      </main>
      <!-- main body - end
      ================================================== -->

      <!-- footer_section - start
      ================================================== -->
       <!-- footer_section - end
      ================================================== -->

    </div>
    <!-- body_wrap - end -->

    <!-- fraimwork - jquery include -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/bootstrap5-dropdown-ml-hack.js"></script>

    <!-- carousel - jquery include -->
    <script src="assets/js/slick.min.js"></script>

    <!-- popup - jquery include -->
    <script src="assets/js/magnific-popup.min.js"></script>

    <!-- jquery-ui - jquery include -->
    <script src="assets/js/jquery-ui.js"></script>

    <!-- off canvas sidebar - jquery include -->
    <script src="assets/js/mCustomScrollbar.js"></script>

    <!-- select option - jquery include -->
    <script src="assets/js/nice-select.min.js"></script>

    <!-- countdown timer - jquery include -->
    <script src="assets/js/countdown.js"></script>

    <!-- counter up - jquery include -->
    <script src="assets/js/counterup.min.js"></script>
    <script src="assets/js/waypoints.min.js"></script>

    <!-- custom - jquery include -->
    <script src="assets/js/main.js"></script>

  </body>
</html>